<template>
    <div>
        <el-scrollbar height="600px">
            <el-table ref="table" :data="tableData" style="width: 100%" empty-text="好像没有数据哎😔" height="600px" v-loading.fullscreen.lock="loadingShow"
                :scrollbar-always-on="true" element-loading-text="数据加载中..." @select="select" @select-all="selectAll">
                <el-table-column type="selection"></el-table-column>
                <el-table-column type="index"></el-table-column>
                <!-- <el-table-column prop="subjectId" label="id" width="100" /> -->
                <el-table-column prop="subjectTitle" label="题目" width="500"/>
                <el-table-column prop="subjectOptionAnswer" label="选项答案" />
                <el-table-column prop="subjectRightKey" label="正确答案" />
                <el-table-column label="发布状态" width="100">
                    <template #default="scope">
                        <el-tag class="ml-2" type="success" v-if="scope.row.status == 1">已发布</el-tag>
                        <el-tag class="ml-2" type="info" v-if="scope.row.status == 2">未发布</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-space wrap>
                            <MyOneDeleteDig :deleteSubject="scope.row"></MyOneDeleteDig>
                            <MyOneUpdateDig :updateSubject="zc[scope.$index]"></MyOneUpdateDig>
                            <MyOneStatusDig :data="zc[scope.$index]"></MyOneStatusDig>
                            <MyDetailsComponent :data="zc[scope.$index]"></MyDetailsComponent>
                        </el-space>  
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>


        <el-pagination v-model:currentPage="store.state.questionBank.subjectModel.subjectPagination.pageNum"
            v-model:page-size="store.state.questionBank.subjectModel.subjectPagination.pageSize"
            :page-sizes="[5,10, 20, 50, 100]" layout=" prev, pager, next, jumper,sizes,total"
            :total="store.state.questionBank.subjectModel.subjectPagination.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script>
import { useStore } from 'vuex'
import axios from 'axios';
import { onMounted, ref, watch } from '@vue/runtime-core';
import { ElLoading } from 'element-plus'
import MyOneDeleteDig from './MyOneDeleteDig.vue'
import MyOneUpdateDig from './MyOneUpdateDig.vue';
import MyOneStatusDig from './MyOneStatusDig.vue';
import { table } from 'console';
import MyDetailsComponent from './MyDetailsComponent.vue';
export default {
    setup() {
        //加载
        let loadingShow = ref(false);
        /* const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        }) */
        const store = useStore();
        let tableData = ref([]);
        //tableData.value = 
        //jian
        let zc = ref([])
        watch(() => store.state.questionBank.subjectModel.subjectTableData, (newVal) => {
            zc.value.splice(0, zc.value.length, ...JSON.parse(JSON.stringify(newVal)))
          console.log(zc.value)
            tableData.value = newVal;
            tableData.value.forEach((val,index) => {
                //console.log(val.subjectOptionAnswer)
                let answer = JSON.parse(val.subjectOptionAnswer);
                //console.log("sfsd")
                let rightKey = val.subjectRightKey.split(",");
                val.subjectOptionAnswer = "";
                val.subjectRightKey = "";
                answer.forEach((an) => {
                    val.subjectOptionAnswer += an.content + " / ";
                    rightKey.forEach((key) => {
                        if (an.id == key) {
                            val.subjectRightKey += an.content + " / ";
                        }
                    });
                });
            });

        });
        
        //当前页码改变时触发函数
        function handleCurrentChange(a) {
            store.commit('selectListSubjectOfTable',[])
            store.commit("selectSubjectTablePageNum", a);
            loadingShow.value = true; //开启加载
            axios.get("/api/subject/selectSubject", {
                params: {
                    subjectTypeId: store.state.questionBank.subjectModel.subjectPagination.subjectTypeId,
                    accountTypeId: store.state.questionBank.subjectModel.subjectPagination.accountTypeId,
                    status: store.state.questionBank.subjectModel.subjectPagination.status,
                    pageNumber: store.state.questionBank.subjectModel.subjectPagination.pageNum,
                    pageSize: store.state.questionBank.subjectModel.subjectPagination.pageSize
                }
            }).then((response) => {
                if (response.status == 200) {
                    if (response.data.code == 200) {
                         loadingShow.value = false;
                        store.commit("selectSubjectTableData", response.data.data.list);
                        store.commit("selectSubjectTableTotal", response.data.data.total);
                       
                    }
                }
            }).finally(() => {
                loadingShow.value = false;
            });
        }
        //页面数据条数被改变触发
        function handleSizeChange(a) {
            store.commit('selectListSubjectOfTable',[])
            loadingShow.value = true;
            store.commit("selectSubjectTablePageSize", a);
            axios.get("/api/subject/selectSubject", {
                params: {
                    subjectTypeId: store.state.questionBank.subjectModel.subjectPagination.subjectTypeId,
                    accountTypeId: store.state.questionBank.subjectModel.subjectPagination.accountTypeId,
                    status: store.state.questionBank.subjectModel.subjectPagination.status,
                    pageNumber: store.state.questionBank.subjectModel.subjectPagination.pageNum,
                    pageSize: store.state.questionBank.subjectModel.subjectPagination.pageSize
                }
            }).then((response) => {
                if (response.status == 200) {
                    if (response.data.code == 200) {                        
                        store.commit("selectSubjectTableData", response.data.data.list);
                        store.commit("selectSubjectTableTotal", response.data.data.total);
                    }
                }
            }).finally(() => {
                loadingShow.value = false;
            });
        }
        //删除
        function deleteClick() {
        }
        //修改
        function updateClick() {
        }
        //用户选择的地方
        let selectList = ref([])
        //单个选择
        function select(selection, row){
            //selectList.value = selection
            store.commit('selectListSubjectOfTable',selection)
        }
        function selectAll(a){
            //selectList.value = a
            store.commit('selectListSubjectOfTable',a)
        }
        let table = ref()
        return {
            tableData,
            table,
            store,
            loadingShow,
            zc,
            handleCurrentChange,
            handleSizeChange,
            deleteClick,
            updateClick,
            select,
            selectAll,
        };
    },
    components: { MyOneDeleteDig, MyOneUpdateDig, MyOneStatusDig, MyDetailsComponent }
}
</script>

<style>

</style>